import React, { Component } from 'react'
import { StyleSheet, View, TouchableOpacity, DeviceInfo } from 'react-native'
import { WebView } from 'react-native-webview'
import FontAwesome from 'react-native-vector-icons/FontAwesome'
import NavigationBar from '../common/NavigationBar'
import ViewUtil from '../util/ViewUtil'
import NavigationUtil from '../navigator/NavigationUtil'
import BackPressComponent from '../common/BackPressComponent'
import FavoriteDao from '../expand/dao/FavoriteDao'

const TRENDING_URL = 'https://github.com/'
const THEME_COLOR = '#678'
export default class DetailPage extends Component {
	constructor(props) {
		super(props)
		this.params = this.props.navigation.state.params
		const { projectModel, flag } = this.params
		this.url =
			projectModel.item.html_url || TRENDING_URL + projectModel.item.fullName
		const title = projectModel.item.full_name || projectModel.item.fullName
		this.favoriteDao = new FavoriteDao(flag)
		this.state = {
			title,
			url: this.url,
			canGoBack: false, //是否能返回上一页（）
			isFavorite: projectModel.isFavorite
		}

		//处理Android中的物理返回键
		this.backPress = new BackPressComponent({
			backPress: () => this.onBackPress()
		})
	}

	componentDidMount() {
		this.backPress.componentDidMount()
	}

	componentWillUnmount() {
		this.backPress.componentWillUnmount()
	}

	onBackPress = () => {
		this.onBack()
		return true
	}

	onBack() {
		if (this.state.canGoBack) {
			this.webView.goBack()
		} else {
			//当webView已经返回到顶了,就返回到app的上一页
			NavigationUtil.goBack(this.props.navigation)
		}
	}

	onFavoriteButtonClick() {
		const { projectModel, callback } = this.params
		const isFavorite = (projectModel.isFavorite = !projectModel.isFavorite)
		callback(isFavorite) //callback是用来在详情页面更新item的收藏状态，同步到上一页
		this.setState({
			isFavorite: isFavorite
		})
		let key = projectModel.item.fullName
			? projectModel.item.fullName
			: projectModel.item.id.toString()
		if (projectModel.isFavorite) {
			this.favoriteDao.saveFavoriteItem(
				key,
				JSON.stringify(projectModel.item)
			)
		} else {
			this.favoriteDao.removeFavoriteItem(key)
		}
	}

	//navigationBar 右边按钮（收藏+分享）
	renderRightButton() {
		return (
			<View style={{ flexDirection: 'row' }}>
				<TouchableOpacity onPress={() => this.onFavoriteButtonClick()}>
					<FontAwesome
						name={this.state.isFavorite ? 'star' : 'star-o'}
						size={20}
						style={{ color: '#ffffff', marginRight: 10 }}
					/>
				</TouchableOpacity>
				{ViewUtil.getShareButton(() => {})}
			</View>
		)
	}

	onNavigationStateChange(navState) {
		this.setState({
			canGoBack: navState.canGoBack,
			url: navState.url
		})
	}

	render() {
		const titleLayoutStyle =
			this.state.title.length > 20 ? { paddingRight: 30 } : null
		let navigationBar = (
			<NavigationBar
				leftButton={ViewUtil.getLeftBackButton(() => this.onBack())}
				title={this.state.title}
				titleLayoutStyle={titleLayoutStyle}
				style={{ backgroundColor: THEME_COLOR }}
				rightButton={this.renderRightButton()}
			/>
		)

		return (
			<View style={styles.container}>
				{navigationBar}
				<WebView
					ref={webView => (this.webView = webView)}
					startInLoadingState={true}
					onNavigationStateChange={e => this.onNavigationStateChange(e)}
					source={{ uri: this.state.url }}
				/>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		marginTop: DeviceInfo.isIPhoneX_deprecated ? 30 : 0
	}
})
